<template>
  <view class="max_box">
    <text class="Title">购车认证</text>
    <view class="box">
      <text class="logo" :style="`background: ${confirmList.carImage ? '#3cb950' : '#ccc'}`">{{
        confirmList.carImage ? '已认证' : '未认证'
      }}</text>
    </view>

    <view class="images">
      <image :src="imageUrl ? imageUrl : baseImgUrl + '/static/image/static/drivingID.png'" mode="scaleToFill" class="image" @click="upload" />
      <view class="popup_text">
        <text>点击拍照上传本人名下行驶证</text>
        <text class="`iconfont icon-zhaoxiangji"></text>
      </view>
      <button class="submitBtn" @click="postConfrim">提交认证</button>
      <view class="separator">
        <text class="line"></text>
        <text class="popup_title">温馨提醒</text>
        <text class="line"></text>
      </view>
      <ul class="popup_ul">
        <li class="popup_li">
          <text class="dot">·</text>
          <text>请拍照上传清晰的本人名下行驶证， 如上图示例</text>
        </li>
        <li class="popup_li">
          <text class="dot">·</text>
          <text>购车认证成功后， 点亮购车认证图标</text>
        </li>
        <li class="popup_li">
          <text class="dot">·</text>
          <text
            >您上传的任何身份证图片等资料， 仅供审核使用且TA人无法看到， 此外，
            我们会对图片进行安全处理， 敬请放心</text
          >
        </li>
      </ul>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserComfirmInfo } from '@/stores/index'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { baseImgUrl } from "@/utils/http";
import { ConfirmAPI } from '@/services/my'
const image = ''
const useUserComfirmProps = useUserComfirmInfo()
//pinia数据
const { id, confirmList } = storeToRefs(useUserComfirmProps)
const imageUrl = ref(confirmList.value.carImage || image)

const upload = () => {
  uni.chooseImage({
    //选择图片
    count: 1, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册选择和相机拍摄
    success: function (res) {
      //成功回调
      uni.uploadFile({
        //上传图片
        url: '/post/api/v1/develop/uploadImage', //上传地址
        method: 'POST', //请求方式
        filePath: res.tempFilePaths[0], //图片路径
        name: 'file',
        header: {
          'Content-Type': 'multipart/form-data', // 设置请求头，表示 multipart/form-data
        },
        success(uploadRes) {
          //成功回调
          if (uploadRes.statusCode === 200) {
            const data = JSON.parse(uploadRes.data)
            if (data.code === 200) {
              uni.showToast({
                title: '上传成功',
                icon: 'success',
              })
              imageUrl.value = data.data.imageUrl // 更新图片 URL
            } else {
              uni.showToast({
                title: '上传失败',
                icon: 'none',
              })
            }
          } else {
            uni.showToast({
              title: '上传失败',
              icon: 'none',
            })
          }
        },
        fail(err) {
          uni.showToast({
            title: '上传失败',
            icon: 'none',
          })
        },
      })
    },
  })
}
const postConfrim = () => {
  if (imageUrl.value == image) {
    uni.showToast({
      title: '请上传图片',
      icon: 'none',
    })
    return
  }
  if (imageUrl.value == confirmList.value.carImage) {
    uni.showToast({
      title: '请上传新图片',
      icon: 'none',
    })
    return
  }
  uni.showModal({
    title: '提示',
    content: '确认提交吗？',
    success: function (res) {
      if (res.confirm) {
        //发送行驶证认证，传递行驶证图片
        ConfirmAPI({ id: id.value, carImage: imageUrl.value }).then((res) => {
          if (res.code == 200) {
            useUserComfirmProps.getUserInfo()
            uni.switchTab({
              url: '/pages/my/my',
            })
          }
          uni.showToast({
            title: res.msg,
            icon: res.code == 200 ? 'success' : 'error',
          })
        })
      } else if (res.cancel) {
        uni.showToast({
          title: '已经取消',
          icon: 'error',
        })
      }
    },
  })
}
</script>

<style scoped lang="scss">
.image {
  width: 100%;
  height: 25rem !important;
}

@media screen and (max-width: 700px) {
  .image {
    height: 10rem !important;
  }
}

.max_box {
  padding-bottom: 1rem;
  box-sizing: border-box;
}

.popup_ul {
  color: #a7a6a6;

  .popup_li {
    margin: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
  }

  .dot {
    font-size: 2.5rem;
    margin-right: 0.5rem;
  }
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

.popup_title {
  font-size: 28rpx;
  color: #999;
}

.popup_text {
  font-size: 0.9rem;
  color: #ccc;
  margin: 0.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-zhaoxiangji {
  margin-left: 5rpx;
}

.images {
  width: 80%;
  margin: 8% auto;
}

.submitBtn {
  margin: 12% auto;
  background-image: linear-gradient(to right, #6fc7d5, #28abc1);
  border-radius: 1.5em;
  color: white;
}

.flex {
  display: flex;
}

.message {
  margin-bottom: 48rpx;
}

.Title {
  font-size: 48rpx;
  font-weight: 500;
  margin: 20% 0 0.5rem;
  text-align: center;
  display: block;
}

.box {
  text-align: center;

  .logo {
    background: #ccc;
    border: none;
    border-radius: 1.2em 0em 1.2em 1.2em;
    color: white;
    padding: 4rpx 20rpx;
    box-sizing: border-box;
    display: inline-block;
    font-size: 28rpx;
  }
}
</style>
